<template>
	<view>
		<view class="search" id="search">
			<view style="position:fixed;left: 0;width: 100%;z-index: 999;">
				<view class="top" style="padding-top: 5px;">
					<u--input v-model="inputValue" @change="inputChange(inputValue)"
						customStyle="background-color:#f2f2f2" shape="circle" placeholder="搜索订单(根据型号搜索)"
						suffixIcon="search" suffixIconStyle="color: #909399">
					</u--input>
				</view>
				<view class="option">
					<view @click="optionClick(item.i)" v-for="(item,index) in option" :key="index"
						style="height: 80rpx;line-height: 80rpx;" :class="item.i == value.state?'nagetive':'nage'">
						{{item.name}}
					</view>
				</view>
			</view>
			<view style="padding-top: 180rpx;">
				<view class="order" v-for="(item,index) in orderList" :key="index">
					<view class="goods" style="position: relative;">
						<view class="left">
							<image style="width: 234rpx;height: 234rpx;"
								:src="item.img ? item.img : 'http://applet.atptest.com/2023081702.jpg'"
								mode="aspectFill"></image>
							<!-- <image style="width: 234rpx;height: 234rpx;" :src="item.img ? item.img : 'http://applet.atptest.com/MfaGs82a1694758004968.jpg?v=1694758009918'" mode="aspectFill"></image> -->
						</view>
						<view class="right">
							<view class="item" style="align-items: center;">
								<view>检测单号：</view>
								<view class="content_item">
									<view>{{item.orderNo}}</view>
									<image v-if="item.isMonthly"
										style="height: 26rpx;position: absolute;right: -10rpx;top: 0;"
										src="../../../static/img/mine/monthly.png" mode="heightFix"></image>
								</view>
							</view>
							<view class="item">
								<view>检测型号：</view>
								<view class="content_item">{{item.model}}</view>
							</view>
							<view class="item">
								<view>检测项目：</view>
								<view class="content_item">{{item.checkPorject}}</view>
							</view>
							<view class="item" v-if="item.state == 1">
								<view>检测日期：</view>
								<view class="content_item">{{item.checkTime}}</view>
							</view>
							<view class="item" v-else>
								<view>申请日期：</view>
								<view class="content_item">{{item.createTime}}</view>
							</view>
							<view class="item">
								<view>检测进度：</view>
								<view class="content_item">{{item.stateValue}}</view>
							</view>
							<view class="logistics_price">
								<view class="logistics" :style="{opacity:item.logisticsState?'1':'0'}">
									{{item.logisticsState}}
								</view>
								<view>
									实付金额：￥{{item.total}}
								</view>
							</view>
						</view>
					</view>

					<!-- 订单金额 -->
					<!-- <view class="totalPrice">
						<text style="color: #e56564;">订单金额：￥{{item.total}}</text>
					</view> -->
					<view
						style="font-size: 20rpx;color: #B50707;border-top: 2px solid #f1f1f1;padding-top: 8rpx;margin-top: 8rpx;">
						注：下单后需要在7天内寄件哦，若未在规定时间内寄出我们将自动退款
					</view>

					<view class="btn">
						<view class="more">
							<buttonProup :item="item" @downFile="downClick" @urgent="urgentClick" />
						</view>
						<!-- 按钮 -->
						<view v-if="item.state == 2">
							<button style="color:#fff;background-color: #3b53b7;margin-left:10rpx;" size="mini"
								@click.stop="conClick(item.orderNo)">继续支付</button>
						</view>
 
						<view v-if="item.stateValue == '等待您的发货'">
							<button style="color:#fff;background-color: #3b53b7;margin-left:10rpx;" size="mini"
								@click.stop="sendClick(item.orderNo)">立即发货</button>
						</view>

						<view v-if="item.state != 2 && item.stateValue != '等待您的发货'">
							<button style="color:#fff;background-color: #3b53b7;margin-left:10rpx;" size="mini"
								@click.stop="orderClick(item)">检测结论</button>
						</view>

						<view v-if="(item.state == 1 || item.state == 3) && item.stateValue != '等待您的发货'">
							<button style="color:#fff;background-color: #3b53b7;margin-left:10rpx;" size="mini"
								@click.stop="imgClick(item)">查看图片</button>
						</view>

						<view v-if="item.state == 3 && item.isFeed">
							<button style="color:#fff;background-color: #3b53b7;margin-left:10rpx;" size="mini"
								@click.stop="problemClick(item.orderNo)">问题反馈</button>
						</view>

						<view v-if="item.state == 1 || item.state == 4">
							<button style="color:#fff;background-color: #3b53b7;margin-left:10rpx;" size="mini"
								@click.stop="servieClick(item.orderNo)">服务评价</button>
						</view>
					</view>

				</view>
				<view v-if="orderList.length < 1" class="noOrder" style="font-size: 36rpx;">
					<u-divider text="您还没有相关订单"></u-divider>
				</view>
			</view>
			<!-- 问题反馈弹框 -->
			<u-modal :show="problemShow" title="问题反馈" showConfirmButton showCancelButton @cancel="problemCancel()"
				@confirm="problemConfirm()">
				<view>
					<view style="font-size: 24rpx;color: #939393;margin-bottom: 10rpx;">请描述你遇到的问题，帮助我们更快处理</view>
					<u--textarea v-model="problemValue.content" placeholder="请输入内容"></u--textarea>
				</view>
			</u-modal>
			<!-- 立即发货弹框 -->
			<u-modal :show="sendFlag" title="请填写发货信息" showConfirmButton showCancelButton @cancel="sendCancel()"
				@confirm="sendConfirm()">
				<view class="send_container">
					<view class="form_item">
						<view class="label">快递公司</view>
						<view class="item_input">
							<u--input placeholder="请填写" border="none" v-model="sendForm.ExpressCompany"
								inputAlign="right" fontSize="12"
								placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
						</view>
					</view>
					<view class="form_item">
						<view class="label">运单号码</view>
						<view class="item_input">
							<u--input placeholder="请填写" border="none" v-model="sendForm.WaybillNo" inputAlign="right"
								fontSize="12"
								placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
						</view>
					</view>
				</view>
			</u-modal>
			<!-- 下载详细报告弹框 -->
			<u-modal :show="reportFlag" title="检测报告信息" confirmText="关闭" @confirm="reportCancel()">
				<view class="send_container" v-if="downList.length > 0">
					<view class="form_item" style="width: 100%;" v-for="(item,index) in downList" :key="index">
						<view class="label">{{item.name}}</view>
						<view class="item_down" @click="downConfirm(item)">下载</view>
					</view>
				</view>
				<view class="form_item" v-else style="font-size: 24rpx;">
					暂无检测报告信息！
				</view>
			</u-modal>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		QueryOrder,
		QueryOrderNew,
		GetPayPerm,
		UpdateOrderState
	} from '../../../api/user.js'
	import {
		addFeedback,
		UpdateAddress,
		GetReport,
		UrgentTesting
	} from "../../../api/order.js"
	import buttonProup from "@/pagesB/pages/button/button.vue"
	export default { 
		data() {
			return {
				code: '',
				inputValue: '',
				value: {
					state: 99,
					pageIndex: 1,
					pageSize: 8
				},
				orderNo: '',
				option: [{
						name: "待付款",
						i: 2,
					},
					{
						name: "检测中",
						i: 3,
					},
					{
						name: "已完成",
						i: 1,
					},
					{
						name: "退款",
						i: 4,
					},
					{
						name: "全部订单",
						i: 99,
					}
				],
				orderList: [],
				timer: '',
				bottom: false,
				// 问题反馈模态框
				problemShow: false,
				problemValue: {
					orderNo: "",
					content: ""
				},
				sendFlag: false,
				sendForm: {
					OrderNo: "",
					ExpressCompany: "",
					WaybillNo: ""
				},
				reportFlag: false,
				downList: [],
				pervRoute: "",
				problemLoading: false
			};
		},
		computed: {
			...mapState('user', ['userInfo']) // vuex
		},
		components: {
			buttonProup
		},
		onShow() {
			let pages = getCurrentPages(); // 页面对象
			let prevpage = pages[pages.length - 2]; // 上一个页面对象
			if (prevpage) {
				this.pervRoute = prevpage.route
			}
		},
		onLoad: function(option) {
			console.log("option", option);
			this.value.state = Number(option.i)
			this.getQueryOrderNew(this.value, this.orderNo)
		},
		onUnload() {
			clearTimeout(this.timer);
			if (this.pervRoute == "pagesA/pages/testReal/testReal") {
				uni.switchTab({
					url: "/pages/test/test"
				})
			} else {
				uni.switchTab({
					url: "/pages/mine/mine"
				})
			}
		},
		onReachBottom() {
			this.value.pageIndex++
			this.getQueryOrderNew(this.value, this.orderNo)
		},
		methods: {
			...mapMutations('user', ['setToken']),

			//订单状态栏切换
			optionClick(i) {
				this.value.state = i
				this.value.pageIndex = 1
				this.orderList = []
				this.getQueryOrderNew(this.value, this.orderNo)
			},
			// input搜索
			inputChange(e) {
				this.orderNo = e
				this.value.pageIndex = 1
				this.orderList = []
				this.getQueryOrderNew(this.value, this.orderNo)
			},

			// 去订单详情
			orderClick(i) {
				uni.navigateTo({
					url: `/pagesB/pages/orderDetail/orderDetail?i=` + i.orderNo
				})
			},

			// 获取订单 ( 新 )
			getQueryOrderNew(e, o) {
				uni.showLoading({
					title: '加载中',
				});
				QueryOrderNew({
					...e,
					model: o,
				}).then((res) => {
					if (res === []) {
						this.bottom = true
					} else {
						this.orderList = this.orderList.concat(res)
						this.timer = setTimeout(() => {
							uni.hideLoading();
						}, 200)
					}
				})
			},

			// 查看图片
			imgClick(item) {
				uni.navigateTo({
					url: `/pagesB/pages/userChat/userChat?i=${item.orderNo}`
				})
			},

			// 立即发货
			sendClick(val) {
				this.sendFlag = true
				this.sendForm.OrderNo = val
				this.sendForm.ExpressCompany = ""
				this.sendForm.WaybillNo = ""
			},

			sendCancel() {
				this.sendFlag = false
			},

			//提交立即发货信息
			async sendConfirm() {
				if (this.sendForm.ExpressCompany == "") {
					uni.showToast({
						duration: 1000,
						title: '请填写快递公司',
						icon: 'error',
					})
					return
				}
				if (this.sendForm.WaybillNo == "") {
					uni.showToast({
						duration: 1000,
						title: '请填写运单号码',
						icon: 'error',
					})
					return
				}
				let res = await UpdateAddress(this.sendForm)
				if (res) {
					uni.showToast({
						duration: 1000,
						title: '提交成功！'
					})
					setTimeout(() => {
						this.sendFlag = false
						this.optionClick(3)
					}, 500)
				} else {
					uni.showToast({
						duration: 1000,
						title: res.message,
						icon: 'error',
					})
				}
			},

			// 继续支付
			conClick(e) {
				// 跳转支付详情页
				uni.navigateTo({
					url: `/pagesA/pages/payOrderNew/payOrderNew?i=${e}`
				})
			},

			//详细报告弹框
			async downClick(val) {
				console.log("val", val);
				this.reportFlag = true
				const res = await GetReport({
					orderNo: val
				})
				this.downList = res
			},

			//催检测
			async urgentClick(val) {
				const res = await UrgentTesting({
					orderNo: val
				})
				console.log("通知", res);
				if (res) {
					uni.showToast({
						duration: 1000,
						title: '已通知检测',
					})
					setTimeout(() => {
						this.orderList = []
						this.getQueryOrderNew(this.value, this.orderNo)
					}, 500)
				} else {
					uni.showToast({
						duration: 1000,
						title: res.message,
						icon: "error"
					})
				}
			},

			//关闭详细报告弹框
			reportCancel() {
				this.reportFlag = false
			},

			//详细报告下载
			downConfirm(item) {
				let fileName = item.name;
				wx.showLoading({
					title: '正在打开文件'
				})
				const manage = wx.getFileSystemManager();
				wx.downloadFile({
					url: item.url, //文件路径
					success: function(res) {
						const savePath = wx.env.USER_DATA_PATH + "/" + fileName
						if (res.statusCode == 200) {
							manage.saveFile({
								tempFilePath: res.tempFilePath,
								filePath: savePath,
								success: function(res) {
									wx.openDocument({
										filePath: res.savedFilePath,
										showMenu: true,
										success: function(res) {
											wx.hideLoading()
										}
									})
								}
							})
						}
					}
				})
			},

			//问题反馈
			problemClick(i) {
				this.problemValue.orderNo = i
				this.problemValue.content = ""
				this.problemShow = true
				this.problemLoading = true
			},

			problemCancel() {
				this.problemShow = false
			},

			async problemConfirm() {
				if (this.problemValue.content == "") {
					uni.showToast({
						duration: 1000,
						title: '内容不能为空',
						icon: 'error'
					})
					return
				}
				uni.showLoading({
					title: "加载中..."
				})
				if (this.problemLoading) {
					this.problemLoading = false
					let res = await addFeedback(this.problemValue)
					if (res) {
						uni.hideLoading()
						uni.showToast({
							duration: 1000,
							title: '提交成功！'
						})
						this.problemShow = false
						setTimeout(() => {
							this.orderList = []
							this.getQueryOrderNew(this.value, this.orderNo)
						}, 500)
					} else {
						uni.hideLoading()
					}
				}
			},

			// 服务评价 
			servieClick(e) {
				uni.navigateTo({
					url: `/pagesB/pages/service/service?i=${e}`
				})
			},

			//回到我的页面
			back() {
				uni.switchTab({
					url: "/pages/mine/mine"
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.send_container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.form_item {
		height: 74rpx;
		line-height: 74rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;

		.label {
			width: 80%;
			color: rgb(61, 61, 61);
			font-family: 思源黑体;
			font-size: 28rpx;
			font-weight: 400;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.item_input {
			width: 80%;
		}

		.item_down {
			color: #2979ff;
			font-size: 24rpx
		}
	}

	.navBarBox {
		width: 100%;
		padding-left: 20rpx;
		z-index: 999 !important;
		position: fixed;
		left: 0;
		font-size: 28rpx;
		background-color: #fff;

		.navBar {
			width: 57%;
			display: flex;
			justify-content: space-between;
			position: relative;

			.nav_item {
				position: absolute;
				bottom: 15rpx;
			}
		}
	}

	.search {
		padding-bottom: 10rpx;

		.top {
			padding: 0 40rpx;
			background-color: #fff;
		}

		.option {
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			color: #7d7e7f;
			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
		}

		.order {
			margin: 10px 10px 0;
			padding: 20rpx;
			border-radius: 8rpx;
			background-color: #fff;
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);

			.goods {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				// padding: 0 10rpx 0;
				font-size: 28rpx;

				.left {
					width: 35%;
					padding-right: 10rpx;
				}

				.right {
					flex: 1;

					view {
						margin: 4rpx 0;
					}

					.item {
						display: flex;

						.content_item {
							width: 65%;
							display: flex;
							flex-wrap: wrap;
						}
					}
				}
			}

			.logistics_price {
				width: 100%;
				color: rgb(179, 0, 0);
				font-family: 思源黑体;
				font-size: 20rpx;
				font-weight: 500;
				display: flex;
				justify-content: space-between;

				.logistics {}
			}

			.totalPrice {
				font-size: 28rpx;
				text-align: right;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-top: 20rpx;
				position: relative;

				.more {
					position: absolute;
					left: 0;
				}
			}
		}

		.noOrder {
			display: flex;
			justify-content: center;
			margin-top: 200rpx;
			color: #7d7e7f;
		}
	}

	.nagetive {
		border-bottom: 3px solid #3b53b7;
		color: #000;
	}
</style>